<template>
  <div class="dcard_wrap">
    <!-- <div class="title_box">
      <span class="title_text">{{ props.title }}</span>
    </div> -->
    <TitleA :title="props.title"></TitleA>
    <div class="content_box">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
  name: "DCard",
});
</script>
<script setup>
import TitleA from "./TitleA.vue";

const props = defineProps(["width", "height", "title"]);

const dcardWidthComp = computed(() => {
  return props.width + "px";
});

const dcardHeightComp = computed(() => {
  return props.height + "px";
});
</script>

<style lang="scss" scoped>
$dcardWidth: v-bind(dcardWidthComp);
$dcardHeight: v-bind(dcardHeightComp);
.dcard_wrap {
  cursor: pointer;
  width: $dcardWidth;
  height: $dcardHeight;
  box-sizing: border-box;
  color: white;
  padding: 10px;
  border: 2px solid rgba(13, 83, 183, 0.8);
  box-shadow: inset 0px 0px 34px rgba(17, 40, 255, 0.46);
}
</style>
